
<!-- 知识库管理 -->
<template>
    <div class="page">
        <div class="nuclein-query">
            <div>知识库管理</div>
            <div style="margin-left: auto;">
                <el-button size="mini" type="primary" @click="handleAdd">添加</el-button>
            </div>
        </div>
        <div class="content-row">
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column prop="essayTitle" label="文章标题" align="center" width="120">
                </el-table-column>
                <el-table-column prop="essayAuthor" label="文章作者" align="center" width="120">
                </el-table-column>
                <el-table-column prop="essayPhoto" label="文章图片" align="center">
                    <template slot-scope="scope">
                        <el-image v-if="scope.row.essayPhoto" :src="scope.row.essayPhoto"></el-image>
                        <div v-else>无</div>
                    </template>
                </el-table-column>
                <el-table-column prop="essayRemarks" label="备注" align="center">
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="essayContent" label="文章内容" align="center" width="140">
                </el-table-column>
                <el-table-column label="操作" align="center" width="160">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleUpdate(scope.row)">修改</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row.sysWorkEssayId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageLimit.page" :page-sizes="[10, 20, 30, 40]" :page-size="pageLimit.size"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="dialogForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="文章标题" :label-width="formLabelWidth" prop="essayTitle">
                    <el-input v-model="dialogForm.essayTitle" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="文章作者" :label-width="formLabelWidth" prop="essayAuthor">
                    <el-input v-model="dialogForm.essayAuthor" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth" prop="essayRemarks">
                    <el-input v-model="dialogForm.essayRemarks" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="文章图片" :label-width="formLabelWidth" prop="essayPhoto">
                    <el-upload :action="'http://192.168.1.24:8080/sys/oss/upload?token=' + token" list-type="picture-card"
                         :on-success="handleSuccess" :limit="1" >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogForm.essayPhoto" alt="">
                    </el-dialog>
                </el-form-item>
                <el-form-item label="文章内容" :label-width="formLabelWidth" prop="essayContent">
                    <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="dialogForm.essayContent"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { essayList, essayAddUpdate, essayDel } from '../../api/api'
import commonFunction from '../../utils/commonFunction'
import commonData from '../../utils/commonData'
export default {
  data () {
    return {
      pageLimit: {
        page: 1,
        size: 10
      },
      token: '',
      dialogFormVisible: false,
      dialogVisible: false,
      total: 0,
      tableData: [],
      title: '添加',
      formLabelWidth: '120px',
      dialogForm: {
        sysWorkEssayId: '', // 文章id'
        essayTitle: '', // 文章标题'
        essayAuthor: '', // 文章作者'
        essayContent: '', // 文章内容'
        essayPhoto: '', // '文章图片
        essayRemarks: '' // 备注'
      },
      rules: {
        essayTitle: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        essayAuthor: [{ required: true, message: '请输入文章作者', trigger: 'blur' }],
        essayContent: [{ required: true, message: '请输入文章内容', trigger: 'blur' }],
        essayPhoto: [{ required: true, message: '请上传文章图片', trigger: 'blur' }],
        essayRemarks: [{ required: true, message: '请输入备注', trigger: 'blur' }]
      }
    }
  },
  created () {
    const item = JSON.parse(localStorage.getItem('persistence')).token
    if (item) {
      this.token = item
    }
    this.gitList()
  },
  watch: {
    dialogFormVisible (newVal, oldVal) {
      if (!newVal) {
        this.dialogForm = {
          sysWorkEssayId: '', // 文章id'
          essayTitle: '', // 文章标题'
          essayAuthor: '', // 文章作者'
          essayContent: '', // 文章内容'
          essayPhoto: '', // '文章图片
          essayRemarks: '' // 备注'
        }
      }
    }
  },
  methods: {
    // 图片上传
    handleRemove () { // 删除图片
      this.dialogForm.essayPhoto = ''
    },
    // 成功添加的回调
    handleSuccess (response, file, fileList) {
      if (response.code === 0) {
        this.dialogForm.essayPhoto = response.url
      }
    },
    // 获取
    gitList () {
      essayList({ ...this.pageLimit }).then(res => {
        if (res.code == 0) {
          const { total, records } = res.page
          this.tableData = records
          this.total = total
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    // 添加
    handleAdd () {
      this.dialogFormVisible = true
      this.title = '添加'
    },
    // 修改
    handleUpdate (e) {
      this.dialogFormVisible = true
      this.title = '修改'
      this.dialogForm.sysWorkEssayId = e.sysWorkEssayId // 文章id'
      this.dialogForm.essayTitle = e.essayTitle // 文章标题'
      this.dialogForm.essayAuthor = e.essayAuthor // 文章作者'
      this.dialogForm.essayContent = e.essayContent // 文章内容'
      this.dialogForm.essayPhoto = e.essayPhoto // '文章图片
      this.dialogForm.essayRemarks = e.essayRemarks // 备注'
    },
    // 删除
    handleDelete (e) {
      this.$confirm('此操作将永久删除巡检任务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        essayDel(e).then(res => {
          if (res.code === 0) {
            this.$message.success('删除成功')
            this.gitList()
          } else {
            this.$message.warning(res.msg)
          }
        })
      }).catch(() => {
        this.$message.warning('您已取消删除')
      })
    },
    // 确定提交
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = {
            ...this.dialogForm,
            sysWorkEssayId: this.dialogForm.sysWorkEssayId ? this.dialogForm.sysWorkEssayId : ''
          }
          essayAddUpdate({ ...data }).then(res => {
            if (res.code === 0) {
              this.$message.success(this.dialogForm.sysWorkEssayId ? '编辑成功' : '添加成功')
              this.dialogFormVisible = false
              this.gitList()
            } else {
              this.$message.warning(res.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    // 分页
    handleSizeChange (val) {
      this.pageLimit.size = val
      this.gitList()
    },
    handleCurrentChange (val) {
      this.pageLimit.page = val
      this.gitList()
    }
  }
}
</script>

<style scoped>
.page {
    position: relative;
    height: 100%;
}

.dialog_butt {
    height: 60px;
    width: 100%;
    position: fixed;
    bottom: 0px;
}

.nuclein-query {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #DCDFE6;
}

.device-type {
    display: flex;
    align-items: center;
    padding: 20px 20px 10px 20px;
}

.device-type>p {
    margin-right: 20px;
}

.content-row {
    overflow: hidden;
}

.device-type {
    display: flex;
    align-items: center;
    padding: 20px 20px 10px 20px;
}

/* 分页 */
.pagination {
    width: 100%;
    padding: 20px;
    border-top: 1px solid #DCDFE6;
}
</style>
